<%- include header%>

<div class="personal">
	<div style="height: 300px;width: 1350px;">
		<img src="/images/perpage.jpg" />
	</div>
	<div class="container">
		<div class="col-lg-3 col-md-3 col-sm-3" style="height: auto;">
			<div class="personal_info">
				<!--头像部分-->
				<div class="headimg">
					<!--<img src="/upload_imgs/background.jpg"/>-->
					<img src="/<%= user.head%>"/>
					<div class="opci">
						
						<a title="编辑头像" class="btn btn-default" data-toggle="modal" data-target="#myModal" style="margin-top: 40px;">
							编辑头像
						</a>
					</div>
					<!--//点击上传后 弹出的模态框-->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="padding-left: 30%;">×</button>
									<h4 class="modal-title" id="myModalLabel">上传</h4>
								</div>
								<form method="post" action="/upload" enctype="multipart/form-data">
									<div class="modal-body">
										<input type="file" name="file1" />
									</div>
									<div class="modal-footer">
										<input type="submit" class="btn btn-primary" value="上传"></input>
								</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--信息部分-->
				<div class="user_info">
					<p>
						<h3 style=""><%=user.name %></h3></p>
					<!--<p>
						<input type="button" value="+关注" class="btn btn-success" />
					</p><br />-->
					<p>
						<h4>
					关注：<a href="#" class="text-success">90</a>
				</h4></p>
					<p>
						<h4>
					粉丝：<a href="#"class="text-success">10086</a>
				</h4></p>
					<p>
						<h4>
					攻略：<a href="#"class="text-success">86</a>
				</h4></p>
					<p>
						<h4>
					游记：<a href="#"class="text-success">88</a>
				</h4></p>
				
				</div>

			</div>
		</div>

		<!--个人内容-->
		<div class="col-lg-7 col-md-7 col-sm-7" style="height:auto;background: white; padding-bottom: 30px;min-height: 300px;">
			<div>

				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#user_info" aria-controls="profile" role="tab" data-toggle="tab">个人资料</a>
					</li>
					<li role="presentation">
						<a href="#tra_notes" aria-controls="profile" role="tab" data-toggle="tab">游记</a>
					</li>
					<li role="presentation">
						<a href="#tra_help" aria-controls="home" role="tab" data-toggle="tab" class="text-success">好友</a>
					</li>
					<li role="presentation">
						<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">收藏</a>
					</li>

				</ul>

				<!-- Tab panes -->
				
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="user_info">
						<button class="btn btn-success">修改资料</button>
						<form action="/change_info" method="post" role="form" >
							<input type="hidden" value="<%= user.name %>" name="aaa" id="aaa"/>
						<p>昵称：<input type="text" value="<%= user.name %>" name="name1" disabled="disabled"/></p>
						<p>性别：<select value="<%= user.sex %>" name="chan_sex" disabled="disabled" 
	style="border: none; background: none;width:44px;
	appearance:none;-moz-appearance:none; -webkit-appearance:none;">
								<%if(user.sex=="女"){%>
								<option selected="selected">女</option>
								<option>男</option>
								<%}else{%>
								<option selected="selected">男</option>
								<option >女</option>
								<%}%>
								</select></p>
						<p>手机：<input type="text" value="<%= user.telephone %>" name="chan_tele" id="chan_tele" disabled="disabled" /></p>
						<p>邮箱：<input type="email" value="<%= user.email%>" name="chan_ema" id="chan_ema" disabled="disabled" /></p>
						<p>宣言：<input type="text" value="<%= user.says%>"  name="chan_says" id="chan_says" disabled="disabled"/></p>
						
						<button type="submit" class="btn btn-success" >确认修改</button>
						</form>
					</div>
					
					<div role="tabpanel" class="tab-pane " id="tra_notes">
						
							
								<% for(var i=0;i<posts.length;i++){ 
									
									%>
									
								<div style="height:auto;">
							<div style="height: 200px; overflow: hidden;
								margin-top: 10px;
								 ">
							<p>
								<h3 >
									<a href="/u/<%= posts[i].name%>/<%= posts[i].time.day%>/<%= posts[i].title%>/<%= posts[i].area%>" 
										class="text-success">
									<%= posts[i].title%>
									</a></h3>
							<a href="/edit/<%= posts[i].name%>/<%= posts[i].time.day%>/<%= posts[i].title%>" target="_blank">编辑</a>
								
								<a  class="delete" style="cursor: pointer;" data-id="<%= posts[i].name%>/<%= posts[i].time.day%>/<%= posts[i].title%>">删除</a>
							</p>
						<form method="get" id="deleteform" name="deleteform">
							</form>
							<p class="info">
								作者：
								<a href="/u/<%= posts[i].name %>" class="text-success">
									<%= posts[i].name %>
								</a>
								日期：
								<a href="#" class="text-success">
									<%= posts[i].time.minute%>
								</a>
								地点：
								<a href="#" class="text-success">
									<%= posts[i].area%>
								</a>
								
							</p>
							<p style="height: 100px; text-overflow:ellipsis; overflow: hidden;">
								<%- posts[i].post%>
							</p>
							
							</div>
						
						</div>
						<%	} %>
					</div>
					<div role="tabpanel" class="tab-pane" id="tra_help">
					
					<%for(var i=0;i<concerns.length;i++){%>
						<h5 style="margin-top: 30px;padding-bottom: 10px; border-bottom: 1px dashed #E1E1E8;">
							<%= i+1%>. <a href="/u/<%= concerns[i].concern %>"><%= concerns[i].concern%>
								
							
							<a href="/delconcern/<%= concerns[i].concern %>" style="float: right;">
								<button  class="btn-success"
									 style="padding: 5px;border-radius: 5px;">取消关注</button></a>
							
						</h5></a>
						
						
						<%}%>
					
					</div>
					<div role="tabpanel" class="tab-pane" id="messages">
						<%for(var i=0;i<collects.length;i++){%>
						<h5 style="margin-top: 30px;padding-bottom: 10px; border-bottom: 1px dashed #E1E1E8;">
							<%= i+1%>. <a href="/u/<%= collects[i].collect %>"><%= collects[i].collect%>
								
							
							<a href="/delcollect/<%= collects[i].collect %>" style="float: right;">
								<button  class="btn-success"
									 style="padding: 5px;border-radius: 5px;">取消收藏</button></a>
							
						</h5></a>
						
						
						<%}%></div>

				</div>

			</div>
		</div>
	</div>
</div>

<%- include footer%>
<link rel="stylesheet" href="/stylesheets/personal_page.css" />
<script type="text/javascript">
jq = jQuery.noConflict();
jq(function() {
	
	jq('.nav-tabs li a').click(function(e) {
		e.preventDefault()
		jq(this).tab('show');
		jq(this).css('border-bottom','5px solid #16A085').parents("li").siblings().children("a").css('border-bottom','none');
	});
	jq(".headimg").on('mousemove', function() {
		jq(".opci").show();
	});
	jq(".headimg").on('mouseleave', function() {
		jq(".opci").hide();
	});
	jq("#user_info button:first-child").on('click',function(){
		jq("#user_info p input").removeAttr("disabled");
		jq("#user_info p select").removeAttr("disabled");
		jq("#user_info p select").removeAttr("disabled");
		jq("#user_info p select").removeAttr("-moz-appearance");
		jq("#user_info p input").css('border','1px solid #ccc');
		jq("#user_info p select").css('border','1px solid #ccc');
		jq("#user_info p input").eq(0).attr('disabled','disabled');
		jq("#user_info p input").eq(0).css('border','none');
		console.info(jq("#user_info p input").eq(0));
		jq("#user_info button:last-child").show();
		
	});
	jq("#user_info button:last-child").hide();
	jq("#user_info button:last-child").on('click',function(){
		
		jq("#user_info button:last-child").hide();
	});
	jq(".delete").click(function(e){
		console.info(jq(this));
		var deletes=jq(this).attr("data-id");
		console.info(deletes);
										e.preventDefault();
										if(confirm("确认删除")){
											//location.href="/remove/"+deletes;
//											jq.ajax({
//												url:"/remove/"+deletes,
//												
//												success:function(data){
//													alert("删除成功");
//												}
//											});

                                         jq("#deleteform")[0].action="/remove/"+deletes;
                                         jq("#deleteform")[0].submit();
										}
									});
});</script>